<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="docgen-resources/docgen.css" type="text/css">
  <meta name="generator" content="FreeMarker Docgen (DocBook 5)">
  <title>
    FreeMarker Manual - The DOM tree
  </title>
    <script type="text/javascript" src="docgen-resources/jquery.js"></script>
    <script type="text/javascript" src="docgen-resources/linktargetmarker.js"></script>
</head>
<body>

    <div class="navigation">
    <div class="breadcrumb">
<span class="breadcrumb">        You are here:
          <a href="index.html">Book</a>
            <b>></b>
          <a href="xgui.html">XML Processing Guide</a>
            <b>></b>
          <a href="xgui_expose.html">Exposing XML documents</a>
            <b>></b>
          The DOM tree
</span>    </div>
    <div class="bookmarks">
<span class="bookmarks">Bookmarks:
<a href="alphaidx.html">Alpha. index</a>, <a href="gloss.html">Glossary</a>, <a href="dgui_template_exp.html#exp_cheatsheet">Expressions</a>, <a href="ref_builtins_alphaidx.html">?builtins</a>, <a href="ref_directive_alphaidx.html">#directives</a>, <a href="ref_specvar.html">.spec_vars</a>, <a href="app_faq.html">FAQ</a>, <a href="api/index.html">API</a>, <a href="../index.html">Home</a></span>    </div>
    <div class="pagers">
      <div class="pagersVerticalSpacer"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></div>
<div class="pagerButton"><a href="xgui_expose_put.html"><span class="hideA">Next page: </span>Putting the XML into the data-model</a></div><div class="pagerButton"><a href="xgui_expose.html">Previous page</a></div><div class="pagerButton"><a href="xgui_expose.html">Parent page</a></div><div class="pagerButton"><a href="index.html">Contents</a></div>      <div class="pagersVerticalSpacer"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></div>
    </div>
    </div>

<div id="mainContent">

  
  
  
  
  <h1 class="rank_section1"
        id="pageTopTitle">
<a name="xgui_expose_dom"></a>The DOM tree  </h1>
    
    
<p>We will use this XML document for the examples:</p><a name="misc.example.bookXml"></a><div align="left" class="programlisting"><table bgcolor="#F8F8F8" cellspacing="0" cellpadding="0" border="0"><tr valign="top"><td height="1" width="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td><td height="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td><td height="1" width="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td></tr><tr><td width="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td><td><table bgcolor="#F8F8F8" cellspacing="0" cellpadding="4" border="0" width="100%" style="margin: 0px"><tr><td><pre style="margin: 0px">
&lt;book&gt;
  &lt;title&gt;Test Book&lt;/title&gt;
  &lt;chapter&gt;
    &lt;title&gt;Ch1&lt;/title&gt;
    &lt;para&gt;p1.1&lt;/para&gt;
    &lt;para&gt;p1.2&lt;/para&gt;
    &lt;para&gt;p1.3&lt;/para&gt;
  &lt;/chapter&gt;
  &lt;chapter&gt;
    &lt;title&gt;Ch2&lt;/title&gt;
    &lt;para&gt;p2.1&lt;/para&gt;
    &lt;para&gt;p2.2&lt;/para&gt;
  &lt;/chapter&gt;
&lt;/book&gt;&nbsp;<span style="font-size: 1pt"> </span></pre></td></tr></table></td><td width="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td></tr><tr valign="top"><td height="1" width="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td><td height="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td><td height="1" width="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td>      </tr>
</table>  </div>
<p>W3C DOM models an XML document as a tree of nodes. The node tree
        of the above XML can be visualized as:</p><div align="left" class="programlisting"><table bgcolor="#F8F8F8" cellspacing="0" cellpadding="0" border="0"><tr valign="top"><td height="1" width="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td><td height="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td><td height="1" width="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td></tr><tr><td width="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td><td><table bgcolor="#F8F8F8" cellspacing="0" cellpadding="4" border="0" width="100%" style="margin: 0px"><tr><td><pre style="margin: 0px">
document
 |
 +- element book
     |
     +- text &quot;\n  &quot;
     |
     +- element title
     |   |
     |   +- text &quot;Test Book&quot;
     |
     +- text &quot;\n  &quot;
     |
     +- element chapter
     |   |
     |   +- text &quot;\n    &quot;
     |   |
     |   +- element title
     |   |   |
     |   |   +- text &quot;Ch1&quot;
     |   |
     |   +- text &quot;\n    &quot;
     |   |
     |   +- element para     
     |   |   |
     |   |   +- text &quot;p1.1&quot;
     |   |
     |   +- text &quot;\n    &quot;
     |   |
     |   +- element para     
     |   |   |
     |   |   +- text &quot;p1.2&quot;
     |   |
     |   +- text &quot;\n    &quot;
     |   |
     |   +- element para     
     |      |
     |      +- text &quot;p1.3&quot;
     |
     +- element
         |
         +- text &quot;\n    &quot;
         |
         +- element title
         |   |
         |   +- text &quot;Ch2&quot;
         |
         +- text &quot;\n    &quot;
         |
         +- element para     
         |   |
         |   +- text &quot;p2.1&quot;
         |
         +- text &quot;\n    &quot;
         |
         +- element para     
             |
             +- text &quot;p2.2&quot;&nbsp;<span style="font-size: 1pt"> </span></pre></td></tr></table></td><td width="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td></tr><tr valign="top"><td height="1" width="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td><td height="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td><td height="1" width="1" bgcolor="black"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></td>      </tr>
</table>  </div>
<p>Note that the disturbing <tt style="color: #A03D10">&quot;\n  &quot;</tt>-s are the
        line-breaks (indicated here with <tt style="color: #A03D10">\n</tt>, an escape
        sequence used in FTL string literals) and the indentation spaces
        between the tags.</p><p>Notes on the DOM related terminology:</p>    <div class="itemizedlist">
<ul>
          <li>
            <p>The topmost node of a tree is called the <b>root</b>. In the case of XML documents, it is
            always the ``document'' node, and not the top-most element
            (<tt style="color: #A03D10">book</tt> in this example).</p>
          </li>

          <li>
            <p>We say that node B is the <b>child</b> of node A, if B is the
            <i>immediate</i> descendant of A. For example, the
            two <tt style="color: #A03D10">chapter</tt> element nodes are the children of
            the <tt style="color: #A03D10">book</tt> element node, but the
            <tt style="color: #A03D10">para</tt> element nodes are not.</p>
          </li>

          <li>
            <p>We say that node A is the <b>parent</b> of node B, if A is the
            <i>immediate</i> ascendant of node B, that is, if B
            is the children of A. For example, the <tt style="color: #A03D10">book</tt>
            element node is the parent of the two <tt style="color: #A03D10">chapter</tt>
            element nodes, but it is not the parent of the
            <tt style="color: #A03D10">para</tt> element nodes.</p>
          </li>

          <li>
            <p>There are several kind of components that can occur in XML
            documents, such as elements, text, comments, processing
            instructions, etc. All such components are nodes in the DOM tree,
            so there are element nodes, text nodes, comment nodes, etc. In
            principle, the attributes of elements are also nodes in the tree
            -- they are the children of the element --, but still, usually we
            (and other XML related technologies) exclude them of element
            children. So basically they don't count as children nodes.</p>
          </li>
        </ul>    </div>
<p>The programmer drops the document node of the DOM tree into the
        FreeMarker data-model, and then the template author can walk the DOM
        tree using that variable as the starting-point.</p><p>The DOM nodes in FTL correspond to <b>node
        variables</b>. This is a variable type, similarly to type
        string, number, hash, etc. Node variable type makes it possible for
        FreeMarker to get the parent node and the child nodes of a node. This
        is technically required to allow the template author to navigate
        between the nodes, say, to use the <a href="ref_builtins_node.html">node built-ins</a> or the <a href="ref_directive_visit.html#ref.directive.visit"><tt>visit</tt></a> and
        <a href="ref_directive_visit.html#ref.directive.recurse"><tt>recurse</tt></a>
        directives; we will show the usage of these in the further
        chapters.</p>  
</div>

    <div class="navigation">
    <div class="pagers">
      <div class="pagersVerticalSpacer"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></div>
<div class="pagerButton"><a href="xgui_expose_put.html"><span class="hideA">Next page: </span>Putting the XML into the data-model</a></div><div class="pagerButton"><a href="xgui_expose.html">Previous page</a></div><div class="pagerButton"><a href="xgui_expose.html">Parent page</a></div><div class="pagerButton"><a href="index.html">Contents</a></div>      <div class="pagersVerticalSpacer"><img src="docgen-resources/img/none.gif" width="1" height="1" alt="" hspace="0" vspace="0" border="0"/></div>
    </div>
    <div class="breadcrumb">
<span class="breadcrumb">        You are here:
          <a href="index.html">Book</a>
            <b>></b>
          <a href="xgui.html">XML Processing Guide</a>
            <b>></b>
          <a href="xgui_expose.html">Exposing XML documents</a>
            <b>></b>
          The DOM tree
</span>    </div>
    </div>

<table border=0 cellspacing=0 cellpadding=0 width="100%">
    <tr>
      <td colspan=2><img src="docgen-resources/img/none.gif" width=1 height=8 alt=""></td>
    <tr>
      <td align="left" valign="top"><span class="smallFooter">
            FreeMarker Manual -- For FreeMarker 2.3.20
            <br>
          HTML generated: 2013-06-27 20:54:33 GMT
      </span></td>
      <td align="right" valign="top"><span class="smallFooter">
          <a href="http://www.xmlmind.com/xmleditor/">
            <img src="docgen-resources/img/xxe.gif" alt="Edited with XMLMind XML Editor">
          </a>
      </span></td>
    </tr>
</table>
  <!-- Put pre-loaded images here: -->
  <div style="display: none">
    <img src="docgen-resources/img/linktargetmarker.gif" alt="Here!" />
  </div>
</body>
</html>

